<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
		</script>
	</head>

	<body>

		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-right">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="mui-content">
							<form class="mui-input-group">
								<div class="mui-input-row">
									<label>input</label>
									<input type="text" class="mui-input-clear" placeholder="Server Ip" id='serverIp'>
								</div>
							</form>
							<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">更新</button>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<!--<a class="mui-icon mui-icon-bars mui-pull-left menua"></a>-->
					<!--<a class="mui-icon mui-icon-plus mui-pull-right adda"></a>-->
					<h1 class="mui-title">通讯录备份</h1>
				</header>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<div class="mui-content">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-collapse mui-active">
									<a class="mui-navigate-right " href="#">备份</a>
									<div class="mui-collapse-content">
										<!-- 第1个面板中的内容 -->
										<ul class="mui-table-view">
											<li id="local_backup" class="mui-table-view-cell mui-collapse">本地备份</li>
											<li id="cloud_backup" class="mui-table-view-cell mui-collapse">云端备份</li>
										</ul>
									</div>
								</li>
								<li class="mui-table-view-cell mui-collapse">
									<a class="mui-navigate-right" href="#">恢复</a>
									<div class="mui-collapse-content">
										<!-- 第2个面板中的内容 -->
										<ul class="mui-table-view">
											<li id="local_recovery" class="mui-table-view-cell mui-collapse">从本地恢复</li>
											<li id="cloud_recovery" class="mui-table-view-cell mui-collapse">从云端恢复</li>
										</ul>
									</div>
								</li>
							</ul>

						</div>

					</div>
				</div>
			</div>
		</div>
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">菜单1</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1"><b>取消</b></a>
				</li>
			</ul>
		</div>

	</body>

	<script>
		mui.init({
			swipeBack: true, //启用右滑关闭功能
			keyEventBind: {
				backbutton: true,
				menubutton: true
			},
			gestureConfig: {
				swipeup: true
			}
		});
		document.getElementById("cloud_backup").addEventListener('tap', backupToCloud, false);
		document.getElementById('local_backup').addEventListener('tap', backupToLocal, false);
		//点击菜单事件
		//		mui('.mui-bar-nav').on('tap', '.menua', function() {
		//			console.log('点击了菜单！');
		//			mui('#sheet1').popover('toggle');
		//		});
		/**
		 * 上滑事件
		 */
		mui('.mui-draggable').on('swipeup', '.mui-inner-wrap', function() {
			mui('#sheet1').popover('toggle');
		});

		function backupToCloud() {
			var jsonAry = [];
			plus.contacts.getAddressBook(plus.constructor.ADDRESSBOOK_PHONE, function(addressbook) {
					addressbook.find(["displayName", "phoneNumbers"], function contactsHandler(contacts) {
							for (var i = 0; i < contacts.length; i++) {
								var c = contacts[i];
								if (c.phoneNumbers.length > 0) {
									var obj = {
										'displayName': c.displayName,
										'phoneNumer': c.phoneNumbers[0].value
									};
									jsonAry.push(obj);
								}
							}
							console.log(JSON.stringify(jsonAry));
							var serverIp = document.getElementById("serverIp").value
							var url = 'http://' + serverIp + '/aaa';
							mui.ajax(url, {
								data: JSON.stringify(jsonAry),
								dataType: 'json',
								type: 'post',
								timeout: 10000,
								success: function(data) {
									console.log('ajax rtn');
								},
								error: function(xhr, type, err) {
								}
							});
						},
						function(e) {
							alert('备份失败,case:' + e.message);
						}, {
							multiple: true
						});
				},
				function(e) {
					alert('备份失败');
					console.log(e.message);
				});
		}

		function backupToLocal() {
			var jsonAry = [];
			plus.contacts.getAddressBook(plus.constructor.ADDRESSBOOK_PHONE, function(addressbook) {
					addressbook.find(["displayName", "phoneNumbers"], function contactsHandler(contacts) {
							for (var i = 0; i < contacts.length; i++) {
								var c = contacts[i];
								if (c.phoneNumbers.length > 0) {
									var obj = {
										'displayName': c.displayName,
										'phoneNumer': c.phoneNumbers[0].value
									};
									jsonAry.push(obj);
								}
							}
							console.log(JSON.stringify(jsonAry));
						},
						function(e) {
							alert('备份失败,case:' + e.message);
						}, {
							multiple: true
						});
				},
				function(e) {
					alert('备份失败');
					console.log(e.message);
				});
		}

		function updateIP() {
			var serverIp = document.getElementById("serverIp").value;
			console.log(serverIp);
		}
		mui.back = function() {
			mui.confirm('要走了？', '', ['该做的都做了', '再想想'], function(e) {
				if (e.index == 0) {
					mui.currentWebview.close();
				}
			});
		}
	</script>

</html>